<template>
  <div class="Con">
    <!--总容器-->
    <div class="Con-H">
      <div class="Con-H-L">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          style="width: 26%"
          >添加课程</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          style="width: 30%"
          @click="DeleteBut()"
          >删除所有课程</el-button
        >

        <el-dropdown
          style="width: 26%; margin-left: 10px"
          trigger="click"
          @command="handleCommand"
          ><!--选择课室删除-->
          <el-button type="danger" size="small" style="width: 100%">
            按机房删除<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="102">B5-102</el-dropdown-item>
            <el-dropdown-item command="203">B5-203</el-dropdown-item>
            <el-dropdown-item command="301">B5-301</el-dropdown-item>
            <el-dropdown-item command="304">B5-304</el-dropdown-item>
            <el-dropdown-item command="401">B5-401</el-dropdown-item>
            <el-dropdown-item command="403">B5-403</el-dropdown-item>
            <el-dropdown-item command="404">B5-404</el-dropdown-item>
            <el-dropdown-item command="501">B5-501</el-dropdown-item>
            <el-dropdown-item command="503">B5-503</el-dropdown-item>
            <el-dropdown-item command="504">B5-504</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="Con-H-R">
        <el-select
          v-model="classroom"
          placeholder="请选择课室"
          style="width: 20%"
          size="small"
          ><!--选择课室-->
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :value="item"
          >
          </el-option>
        </el-select>

        <el-date-picker
          v-model="classroomTime"
          type="date"
          placeholder="选择课程日期"
          style="width: 30%; margin-left: 20px"
          size="small"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-M-d"
        >
        </el-date-picker
        ><!--选择日期-->

        <el-input
          v-model="teacherName"
          placeholder="老师姓名"
          style="width: 20%; margin-left: 20px"
          size="small"
        ></el-input
        ><!--选择老师姓名-->

        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          style="margin-left: 20px"
          @click="search()"
          >搜索</el-button
        ><!--搜索-->
      </div>
    </div>
    <!--上面按钮部分-->

    <div class="Con-B">
      <div class="Con-B-C">
        <el-table
          height="100%"
          layout="total,prev, pager, next,jumper"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; height: 100%; overflow: auto"
        >
          <el-table-column prop="room" label="课室"> </el-table-column>

          <el-table-column prop="xz" label="课程性质"> </el-table-column>

          <el-table-column prop="c_number" label="课程编号"> </el-table-column>

          <el-table-column prop="c_name" label="课程名称"> </el-table-column>

          <el-table-column prop="c_type" label="课程类型"> </el-table-column>

          <el-table-column prop="c_totaltime" label="课程学时">
          </el-table-column>

          <el-table-column prop="c_teacher" label="教师"> </el-table-column>

          <el-table-column prop="c_grade" label="年级"> </el-table-column>

          <el-table-column prop="c_classroom" label="班级"> </el-table-column>

          <el-table-column prop="student_number" label="班级人数">
          </el-table-column>

          <el-table-column prop="c_date" label="课程日期"> </el-table-column>

          <el-table-column prop="c_time" label="开始时间"> </el-table-column>

          <el-table-column id="el-table-tzz" prop="c_state" label="状态">
          </el-table-column>

          <!--<el-table-column label="操作">
      <template slot-scope="scope">
          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>-->
        </el-table>
      </div>
      <!--课程具体内容-->

      <div class="Con-B-F">
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="total"
          :page-size.sync="pageSize"
          :current-page.sync="pageNum"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!--分页-->
    </div>
    <!--下面部分-->

    <!--<div class="Con-Foot">
           <p>* 当课室，日期，教师姓名都没有选择，查询的是该学期的所有课程！</p>
     </div>-->
    <!--解释部分-->
  </div>
  <!--容器-->
</template>

<script>
import { axios1 } from "@/network";
import Qs from "qs";
export default {
  data() {
    return {
      classroom: null, //选择的课室
      options: [
        //所有的课室
        null,
        "102",
        "203",
        "301",
        "304",
        "401",
        "403",
        "404",
        "501",
        "503",
        "504",
      ],
      classroomTime: null, //选择课室的时间
      teacherName: null, //选择教师姓名
      tableData: [],

      multipleSelection: [], //取消的数据
      total: 100,
      pageSize: 20, //默认一页显示20条数据
      pageNum: 1, //默认是第一页
    };
  },
  methods: {
    search() {
      //搜索
      let data2 = {
        //处理发送的数据
        room: this.classroom,
        c_teacher: this.teacherName,
        c_date: this.classroomTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      // console.log(this.classroom+this.classroomTime+this.teacherName)
      axios1({
        url: "/course/getCourseByType",
        method: "post",
        headers: {
          token: this.$store.state.token,
        },
        data: Qs.stringify(data2),
      }).then((res) => {
        //console.log(res)
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.$message({
          message: "查询成功！",
          type: "success",
          duration: 1000,
        });
        //console.log(this.pageSize)
        for (let i = 0; i < this.pageSize; i++) {
          if (res.data.data.data[i].c_state == 0) {
            res.data.data.data[i].c_state = "未确认";
          } else {
            res.data.data.data[i].c_state = "已确认";
          }
        }
      });
    },

    handleDelete(index, row) {
      //单个删除操作
      console.log(index, row);
    },

    changePage() {
      //分页
      this.CourseAll();
      console.log(this.pageNum);
    },

    CourseAll() {
      //分页接收全部数据
      let data1 = {
        //处理发送的数据
        room: this.classroom,
        c_teacher: this.teacherName,
        c_date: this.classroomTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      axios1({
        url: "/course/getCourseByType",
        method: "post",
        headers: {
          token: this.$store.state.token,
        },
        data: Qs.stringify(data1),
      })
        .then((res) => {
          //console.log(res);
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;

          for (let i = 0; i < this.pageSize; i++) {
            //console.log(res.data.data.data[i].c_state)
            if (res.data.data.data[i].c_state == 0) {
              res.data.data.data[i].c_state = "未确认";
              // console.log(res.data.data.data[i].c_state)//未确认
            } else {
              res.data.data.data[i].c_state = "已确认";
            }
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    //删除按钮事件

    //按照课室删除课程
    deleteCourseByClassName(InputRoom) {
      let datax = {
        room: InputRoom,
      };
      axios1({
        url: "/course/deleteCourseByRoom",
        method: "post",
        headers: {
          token: this.$store.state.token,
        },
        data: Qs.stringify(datax),
      })
        .then((res) => {
          console.log(res);
        })
        .catch((res) => {
          console.log(res);
        });
    },

    DeleteBut() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCourseByClassName("102");
          this.deleteCourseByClassName("203");
          this.deleteCourseByClassName("301");
          this.deleteCourseByClassName("304");
          this.deleteCourseByClassName("401");
          this.deleteCourseByClassName("403");
          this.deleteCourseByClassName("404");
          this.deleteCourseByClassName("503");
          this.deleteCourseByClassName("504");
          this.deleteCourseByClassName("505");
          this.$message({
            type: "success",
            message: "数据已删除",
            duration: 1000,
          });
          //this.deleteCourseByClassName('102')
          setTimeout(() => {
            location.reload();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCommand(command) {
      //通过机房删除课程数据
      // console.log(command)
      this.$confirm("你确定删除" + command + "课室的所有课程信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCourseByClassName(command); //按课室删除
          this.$message({
            type: "success",
            message: "数据已删除",
            duration: 1000,
          });
          //this.deleteCourseByClassName('102')
          setTimeout(() => {
            location.reload();
          }, 1000);
          //确定删除
          console.log(command);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.CourseAll(); //分页接受全部数据
  },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
.Con {
  width: 96%;
  height: 98%;
  margin: auto;
  margin-top: 10px;
  box-shadow: 1px 1px 10px rgb(70, 70, 70);
}

.Con-H {
  width: 100%;
  height: 10%;
  border-bottom: 1px solid rgb(197, 196, 196);
}
.Con-B {
  width: 100%;
  height: 80%;
  margin-top: 1%;
}
.Con-Foot {
  height: 5%;
  width: 100%;

  margin-top: 1%;
}
.Con-H-L {
  width: 40%;
  height: 100%;

  float: left;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
}
.Con-H-R {
  width: 60%;
  height: 100%;
  float: right;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
}
.Con-B-C {
  width: 100%;
  height: 95%;
  background-color: rgb(92, 94, 93);
  overflow: auto;
}
.Con-B-F {
  width: 100%;
  height: 5%;
  margin-top: 20px;
}
.Con-Foot p {
  text-align: right;
  margin-top: 15px;
  padding-right: 30px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(110, 110, 110);
}
</style>
